<div class="content">
  <div class="title">
    <button mat-button color="primary" class="add-btn" (click)="onOpenAdd()" *ngIf="isAdmin">添加</button>
  </div>
  <div class="grid">
    <table mat-table [dataSource]="departments | paginate: {itemsPerPage: pageSize, currentPage: page, totalItems: total}" [trackBy]="trackById">
      <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox (change)="$event? allToggle() : null"
            [checked]="selection.hasValue() && isAllSelected()"
            [indeterminate]="selection.hasValue() && !isAllSelected()"
          >
          </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
          <mat-checkbox (change)="$event ? selection.toggle(row): null"
            (click)="$event.stopPropagation()"
            [checked]="selection.isSelected(row)">
          </mat-checkbox>
        </td>
      </ng-container>

      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>部门名称</th>
        <td mat-cell *matCellDef="let row ">{{ row.departName }}</td>
      </ng-container>

      <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef>部门描述</th>
        <td mat-cell *matCellDef="let row">{{ row.description }}</td>
      </ng-container>



      <ng-container matColumnDef="operate">
        <th mat-header-cell *matHeaderCellDef>操作</th>
        <td mat-cell *matCellDef="let row">
          <button mat-button  (click)="onOpenEdit(row)">编辑</button>
          <button mat-button (click)="onDelete(row.id)">删除</button>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="cols"></tr>
      <tr mat-row *matRowDef="let data; columns: cols"></tr>

    </table>
    <app-pagination
      (pageChange)="onPageChanged($event)"
      [maxSize]="9"
      [isShowInput]="true"
      [isMiniMode]="false"
      [total]="total"
    >
    </app-pagination>
  </div>
</div>
